<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./public/jQuery.min.js"></script>
  <link rel="stylesheet" href="./css/login/login.css">
  <title>登录</title>
</head>

<body>
  <div id="login">
    <div class="header">
      <header></header>
      <div class="login">
        <!-- 内容 -->
        <div class="logincenter">
          <div class="qrcode">
            <div class="vxbox">
              <img src="./img/pclogin/vx.png" alt="vx">
              <p>微信扫码登录</p>
            </div>
            <div>
              <img src="./img//pclogin/erweima.png" alt="qr">
            </div>
          </div>
          <div class="loginform">
            <form action="index.html" id="loginForm" method="post">
              <p class="lftit">密码登录</p>
              <div class="logininput">
                <input type="tel" id="username" class="input" placeholder="请输入账号" required>
                <input type="password" id="password" class="input" name="password" placeholder="请输入密码" required>
              </div>
              <button class="submit" type="submit"><a href="#">登录</a></button>
            </form>
          </div>
        </div>
        <!-- qq登录注册 -->
        <div class="fun">
          <div class="qq">
            <div class="qqcircle">
              <img src="./img/pclogin/QQ.png" alt="">
            </div>
            <p class="qqtit">
              <a href="#">QQ登录/注册</a>
            </p>
          </div>
          <div class="qq">
            <div class="qqcircle">
              <img src="../img/pclogin/tel.png" alt="">
            </div>
            <div class="qqtit">
              <a href="#">手机登录/注册</a>
            </div>
          </div>
        </div>
        <!-- 声明 -->
        <div class="logintext">
          <p><a href="#">登录即同意《版权声明》《隐私声明》</a></p>
          <p><a href="#">其他方式登录</a></p>
        </div>
      </div>
    </div>
    <div>
      <footer></footer>
    </div>
  </div>
</body>
<script>
  // 头部尾部
  $(function () {
    $("header").load("./components/header.html")
    $("footer").load("./components/footer.html")
  });
  // 头部尾部
  // 登录
  document.getElementById("loginForm").addEventListener("submit", function(event) {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        
        if (username.length < 5) {
            event.preventDefault(); // 阻止表单提交
            alert("用户名长度必须至少为5个字符。");
        }
        
        if (password.length < 8) {
            event.preventDefault(); // 阻止表单提交
            alert("密码长度必须至少为8个字符。");
        }
    });
</script>

</html>
